import React, { forwardRef, useId } from 'react';
import { TCheckboxRadioProps } from '../common/CheckboxRadio.types';
import { StyledCheckboxRadio, StyledLabel } from '../common/CheckboxRadio.styled';

/**
 * @function Checkbox - Компонент Checkbox.
 * @param {ICheckboxProps} nextProps - Свойства компонента.
 * @param {ForwardedRef<HTMLInputElement>} ref - Ссылка на элемент Checkbox. 
 * @param {string} label - Заголовок.
 * @param {string} type - Тип чекбокса.
 * @returns {React.ReactElement} - Компонент Checkbox.
 */
const Checkbox = forwardRef<HTMLInputElement, TCheckboxRadioProps>((
    { label, ...nextProps }, ref) => {

    const checkboxId = useId(); 

    return (
        <>
            <StyledCheckboxRadio ref={ref} id={checkboxId} type="checkbox" {...nextProps}/>
            <StyledLabel htmlFor={checkboxId}>{label}</StyledLabel>
        </>
    );
});

Checkbox.displayName = 'Checkbox';

export default Checkbox;